<template>
	<view class="shopInfo">
		<NavBar title="店铺信息" leftIcon="/static/img/index/119.png">
		</NavBar>

		<scroll-view scroll-y="true">
			<view class="shopInfo_1">
				<view class="top">
					<view class="top_1">
						<view class="left">
							<image class="image"
								:src="data.shopDetails.storeInfoDetail?data.httpUrl+'/app/file/viewFile?fileId='+data.shopDetails.storeInfoDetail.logFileId:'/static/img/index/35.png'"
								mode="aspectFill"></image>
						</view>
						<view class="right">
							{{data.shopDetails.storeInfoDetail.storeName}}
							<view class="">
								<view>
									<image src="/static/img/index/164.png" mode="widthFix"></image>
									{{data.shopDetails.storeInfoDetail.credit}}
								</view>
								<view>
									<image src="/static/img/index/165.png" mode="widthFix"></image>
									{{data.shopDetails.storeInfoDetail.bondAmount}}
								</view>
							</view>
						</view>
					</view>
					<view class="bot" @tap="navTo('/pages/storeInformation/index?isEdit='+true)">
						编辑店铺
						<image src="/static/img/index/118.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="info">
					<view class="item">
						主体类型
						<view class="">
							{{data.shopDetails.storeInfoDetail.mainType.name}}
						</view>
					</view>
					<view class="item">
						联系电话
						<view class="">
							{{data.shopDetails.storeInfoDetail.linkPhone}}
						</view>
					</view>
					<view class="item">
						地址
						<view class="">
							{{data.shopDetails.storeInfoDetail.addressDetail}}
						</view>
					</view>
					<view class="item">
						行业类目
						<view class="">
							{{data.shopDetails.storeInfoDetail.industryName}}
						</view>
					</view>
					<view class="item">
						客服电话
						<view class="">
							{{data.shopDetails.storeInfoDetail.servicePhone}}
						</view>
					</view>
					<view class="item">
						店铺介绍
						<view class="">
							{{data.shopDetails.storeInfoDetail.storeDesc}}
						</view>
					</view>
				</view>
				<view class="zz">
					<view class="item" @tap="navTo('/pages/qualificationInformationShop/index?isCart=1')">
						身份证信息
						<view class="">
							<image src="/static/img/index/25.png" mode="widthFix"></image>
						</view>
					</view>
					<view v-if="data.shopDetails.storeInfoDetail.mainType.value == 'COMPANY'" class="item COMPANY"
						@tap="navTo('/pages/qualificationInformationShop/index')">
						资质信息
						<view class="">
							<image src="/static/img/index/25.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="yy">
					<view class="item" @tap="data.show = true">
						营业时间
						<view class="">
							{{data.shopDetails.storeInfoDetail.workDays}} {{data.shopDetails.storeInfoDetail.workTime}}
							<image src="/static/img/index/25.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="item">
						营业状态
						<view class="">
							{{data.shopDetails.storeInfoDetail.workState}}
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<u-popup zIndex="1" round="20" mode="bottom" :show="data.show" @close="()=>{data.show = false}">
			<view class="popupMian">
				<view class="popupTop">
					<text @tap="data.show = false">取消</text>
					营业时间
					<text @tap="submit">确定</text>
				</view>
				<view class="popupTop1">
					<text @tap="handeClick(index)" :class="data.activeList.indexOf(index+1) != -1?'active':''"
						v-for="(item,index) in data.weekArr" :key="index">{{item}}</text>
				</view>
				<tpf-time-range ref="time" startTime="00:00" startDefaultTime="06:00" endTime="23:59"
					endDefaultTime="08:00">
				</tpf-time-range>
			</view>

		</u-popup>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import NavBar from '@/components/navBar.vue'
	import { myStoreDetail, updateWorkTime } from '@/utils/api/shop'
	const time = ref()
	type Data = {
		shopDetails : any,
		httpUrl : string,
		show : Boolean,
		weekArr : any,
		activeList : any
	}
	const data = reactive<Data>({
		httpUrl: getApp().globalData.baseUrl,
		shopDetails: { storeInfoDetail: {} },
		show: false,
		activeList: [],
		weekArr: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日',]
	})
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
	const handeClick = (index : number) => {
		const index1 = data.activeList.indexOf(index + 1);
		if (index1 == -1) {
			data.activeList.push(index + 1)
			return;
		}
		data.activeList.splice(index1, 1)
	}
	const submit = () => {
		const obj = { workDays: data.activeList, timeEnd: '', timeStart: '' }
		if (!data.activeList.length) {
			uni.showToast({
				title: '请选择星期',
				icon: 'none',

			})
			return;
		}
		time.value.startDefaultTimeArr.map((item : number) => {
			let i = item < 10 ? '0' + item : item;
			obj['timeStart'] += obj['timeStart'] ? i : i + ":"
		})
		obj['timeStart'] = obj['timeStart'] + ':00'
		time.value.endDefaultTimeArr.map((item : number) => {
			let i = item < 10 ? '0' + item : item;
			obj['timeEnd'] += obj['timeEnd'] ? i : i + ":"
		})
		obj['timeEnd'] = obj['timeEnd'] + ':00'
		uni.showLoading({
			title: '上传中..',
			mask: true
		})
		updateWorkTime({ data: obj }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: '上传成功!',
					icon: 'none'
				})
				data.show = false;
				myStoreDetail().then((res) => {
					data.shopDetails = res.data;
				})
			}
		})
	}
	myStoreDetail().then((res) => {
		if (res.data.storeInfoDetail.bondAmount >= 1000000) {
			res.data.storeInfoDetail.bondAmount = ((res.data.storeInfoDetail.bondAmount / 10000 + '').split('.')[0]) + '万'
		}

		data.shopDetails = res.data;
	})
</script>

<style lang="scss">
	.popupMian {
		padding: 36rpx;

		.popupTop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;

			text {
				font-weight: 500;
				font-size: 32rpx;
			}

			text:nth-of-type(1) {
				color: #757575;
			}

			text:nth-of-type(2) {
				color: #6B64D3;
			}
		}

		.popupTop1 {
			display: flex;
			margin-bottom: 30rpx;
			flex-wrap: wrap;

			text {
				line-height: 66rpx;
				width: 24%;
				margin-right: 1.33333%;
				margin-top: 32rpx;
				text-align: center;
				border-radius: 12rpx;
				font-weight: bold;
				background: #F4F6FA;
			}

			text:nth-of-type(4n) {
				margin-right: 0;
			}

			.active {
				color: #6B64D3;
				background: #E4E2FC;
			}
		}
	}

	.shopInfo {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #6B64D3 0%, #F4F6FA 100%);

		scroll-view {
			flex: 1;
			overflow: auto;
			padding: 45rpx 24rpx 20rpx 24rpx;
		}

		.shopInfo_1 {
			>.top {
				border-radius: 36rpx;
				overflow: hidden;

				.top_1 {
					display: flex;
					padding: 24rpx 32rpx;
					background: #fff;
					align-items: center;

					.left {
						width: 128rpx;
						height: 128rpx;
						border-radius: 16rpx;
						margin-right: 24rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 16rpx;
						}
					}

					.right {
						font-size: 36rpx;

						>view {
							margin-top: 16rpx;
							display: flex;

							view {
								border-radius: 8rpx;
								padding-right: 16rpx;
								margin-right: 16rpx;
								display: flex;
								align-items: center;

								image {
									width: 86rpx;
									margin-right: 10rpx;
								}
							}

							view:nth-of-type(1) {
								margin-right: 24rpx;
								background: #CEEFFF;
								color: #40AFFF;
							}

							view:nth-of-type(2) {
								background: #FFFDCF;
								color: #FFCC40;
							}
						}
					}
				}

				.bot {
					background: #E4E2FC;
					color: #6B64D3;

					image {
						width: 32rpx;
					}

					padding: 11rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

	}

	:deep(.navBarTop) {
		background: transparent !important;
		color: #fff !important;
	}

	.info {
		margin-top: 45rpx;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 48rpx;
		color: #595959;

		view {
			margin-left: 50rpx;
			align-items: center;
			justify-content: flex-end;
			text-align: right;
			display: flex;
			flex: 1;

			image {
				width: 25rpx;
			}

			align-items: center;
		}
	}

	.zz {
		margin: 24rpx 0;
	}

	.info,
	.zz,
	.yy {
		padding: 48rpx 56rpx 48rpx 56rpx;
		border-radius: 24rpx;
		background: #fff;

		>view:nth-of-type(1) {
			margin-top: 0;
		}
	}
</style>